<template>
    <div>
      <!-- 新的标签 -->
      <div class="background-image">
        <div class="form-smClass-item">
          <span class="smclass-label">请选择你想要查看的门店信息：</span>
          <div class="input-group-class">
            <el-select v-model="avaliableValue"  placeholder="请选择门店" style="width: 200px;" filterable :filter-method="customFilter">
              <el-option v-for="avaliable in filteredList"
                         :key="avaliable.storeId"
                         :label="avaliable.storeName"
                         :value="avaliable.storeId"></el-option>
            </el-select>
          </div>
          <div class="jump-class">
            <el-button type="success" @click="jumpToBlock">跳转</el-button>
          </div>
        </div>
      </div>
      </div>
</template>

<script setup>
import {useRoute, useRouter} from 'vue-router';
import axios from "axios";
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
// 定义响应式数据
const avaliableList = ref([]);
const avaliableValue = ref(null);
const filteredList = ref([]); // 初始时，filteredList 和 avaliableList 相同

// 定义 getAllAvaliableStoreInfos 函数
const getAllAvaliableStoreInfos = async (staffId) => {
  try {
    const res = await axios.get('https://mms.mumuso.com:8114/drggleProject/getStore/getAllIsAvailableStoreIdByStaffId/' + staffId);
    if (res.data.code === 200) {
      avaliableList.value = res.data.data;
      filteredList.value = res.data.data
    } else {
      ElMessage.error(res.data.msg);
    }
  } catch (error) {
    ElMessage.error('请求失败，请稍后再试');
  }
};

// 自定义过滤方法
// 自定义过滤方法
const customFilter = (query) => {
  console.log("搜索条件：" + query)
  if (!query) {
    // 如果没有输入搜索条件，显示所有选项
    filteredList.value = avaliableList.value;
  } else {
    // 根据搜索条件进行模糊匹配
    filteredList.value = avaliableList.value.filter(avaliable =>
        avaliable.storeName.includes(query)
    );
  }
};



// 获取路由信息
const route = useRoute();
const router = useRouter();
const staffId = route.query.StaffID;

// 处理 StaffID 参数
if (staffId.startsWith("MS") || staffId.startsWith("GP")) {
  getAllAvaliableStoreInfos(staffId);
} else {
  router.push({
    name: "index",
    query: {StoreID: staffId}
  });
}

const jumpToBlock = () => {
  if (!avaliableValue.value) {
    // eslint-disable-next-line no-undef
    ElMessageBox.alert("请先选择你想要查看的门店!", {
      type: "error",
      confirmButtonText: "确认",
      customClass: "my-custom-error",
    });
    return;
  } else {
    router.push({
      name: "index",
      query: {StoreID: avaliableValue.value, StaffID: staffId}
    })
  }
}
</script>

<style scoped>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;  /* 确保页面占满整个视口 */
  overflow: hidden;  /* 隐藏滚动条 */
}

.background-image {
  width: 100vw;      /* 设置为视口宽度的100% */
  height: 100vh;     /* 设置为视口高度的100% */
  background-image: url('@/assets/img/bag.jpg');
  background-size: cover;  /* 保持图片比例并覆盖容器 */
  position: relative;
}
/*.form-smClass-item {*/
/*  display: flex;*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  align-items: center;*/
/*}*/

/* 样式整体调整 */
.form-smClass-item {
  position: absolute;
  bottom: -9px;
  margin-bottom: 20px;  /* 给每个表单项添加间距 */
  display: flex;
  align-items: center;  /* 左对齐 */
  font-family: 'Arial', sans-serif;
  left: 24px;
}


</style>
